<template>
  <div class="todolist">
    <van-row type="flex" justify="center">
      <van-col span="20">
        <h2>任务清单</h2>
        <!-- 添加任务 -->
        <div class="addTask">
          <van-field
            v-model="addTask"
            placeholder="添加任务"
            @keyup.enter="add"
          />
        </div>
        <br />
        <van-button plain type="primary" @click="add">添加任务</van-button
        ><br />
        <hr />
        <br />
        <h2>我的任务</h2>
        <!-- 任务列表 -->
        <div class="filterTask">
          <van-field
            v-model="filter"
            placeholder="筛选任务"
            @keyup.enter="query"
          />
        </div>
        <br />
        <ul v-for="(item, index) in result" :key="index">
          <li class="task" v-if="display[index]">
            <van-checkbox
              v-model="checked[index]"
              icon-size="20px"
              class="checkBox"
            >
            </van-checkbox>
            {{ item }}
            <span class="del">
              <van-icon color="red" name="cross" @click="del(index)" />
            </span>
          </li>
        </ul>
        <br />
        <!-- 清空任务 -->
        <van-button color="rgb(128,128,128)" plain @click="clear"
          >清空任务</van-button
        >
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addTask: "",
      result: [],
      filter: "",
      checked: [],
      display: [],
    };
  },

  methods: {
    add: function () {
      //添加任务
      if (this.addTask) {
        this.result.push(this.addTask);
        this.display.push(true);
        this.addTask = "";
      }
    },
    clear: function () {
      //清空任务
      this.result = [];
    },
    del: function (index) {
      //删除某一个任务
      this.result.splice(index, 1);
      this.checked.splice(index, 1);
    },
    query: function () {
      // 查找任务
      // console.log(this.filter);
      this.display = [];
      for (var i = 0; i < this.result.length; i++) {
        if (this.result[i].includes(this.filter)) {
          this.display.push(true);
        } else {
          this.display.push(false);
        }
      }
      if (this.filter === "") {
        for (var i = 0; i < this.result.length; i++) {
          this.display[i] = true;
        }
      }
    },
  },
};
</script>
<style scoped="less">
.todolist {
  height: 100%;
  width: 100%;
  padding-bottom: 15%;
}
.addTask {
  border-bottom: 1px solid black;
}

.filterTask {
  border-bottom: 1px solid rgb(88, 86, 86);
}

.task {
  font-size: 30px;
}

.checkBox {
  height: 30px;
  width: 30px;
  float: left;
}

.del {
  position: absolute;
  right: 7%;
}
</style>